<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>


  <div id="app">
    <input type="text" v-model="obj.words">

    <p>意大利语 : {{result}}</p>
  </div>

  <script src="./js/vue2.6.12.js"></script>
  <script src="./js/axios.js"></script>


  <script>

    var app = new Vue({
      el:'#app',
      data:{
        obj:{  // new 对象  堆内存
          words:'可可'   // 普通  栈内存
        },
        result:''
      },
      methods:{
        
      },
      watch:{
        // 'obj.words'(){}
        obj:{
          deep:true,// 深度监视
          immediate:true,// 初始化之后 , 立即执行一次handler
          // 监听器 函数 , 可以写一些 要执行的逻辑
          handler(newValue){  
            // console.log('handler执行了');
            // console.log(newValue);

            clearTimeout(this.timer)
            this.timer = setTimeout(async ()=>{
                var val = await axios({
                  url:'https://apifoxmock.com/m1/3318905-0-default/translate',
                  // methods:'get'
                  params:{
                    words:newValue
                  }
                },500)
              console.log(val.data.result)
              this.result = val.data.result
            }) 
          }
        }
      }
    })

    

  </script>
</body>
</html>